<template>
	<div >
		<!-- 群聊列表 -->
		<template>
			<u-sticky :offset-top="0" :customNavHeight="0">
				<u-navbar leftIcon="" placeholder title="群聊" :rightIcon="groupsFlag?'plus':''" :rightText="groupsFlag?'创建':''"
					@rightClick="onCreateGroup">
					
					</u-navbar>
					<div class="search-box">
						<u-search :showAction="false" placeholder="请输入关键字搜索群聊名称" v-model="keyword" @change="searchChange"></u-search>
					</div>
			</u-sticky>
			
				
			<div class="list" v-for="(item,index) in groupList" :key="index" @click="enterConversation(item)">
				<Avatar useSkeletonAnimation :url="item.avatar==='https://web.sdk.qcloud.com/im/assets/images/Public.svg'?'https://main-pro.yanchaochao.com/mp-static/96x96.png':item.avatar" size="50px" />
				<div class="content ">
					{{ item.name}}
				</div>
			</div>
			<div class="empty" v-if="!groupList.length">
				<u-empty :icon="empty" text="暂无群聊"></u-empty>
			</div>
		</template>
		<Tabbar :tabbarIndex="1" />
	</div>
</template>
<script lang="ts" setup>
	import {checkUserInfo } from "../../utils/checkLogin";
	import {
		TUIStore,
		StoreName,
		TUIConversationService
	} from "@tencentcloud/chat-uikit-engine";
	import { TUIGlobal } from "@tencentcloud/universal-api";
	import Tabbar from "../common/tabbar/tabbar.vue";
	import Avatar from "../common/Avatar/index.vue";
	import empty from "../../assets/icon/empty.png";
	import { onHide, onShow,onUnload } from "@dcloudio/uni-app"; 
	import { onMounted, ref, watchEffect } from "../../adapter-vue";
	//是否可以建群
	let groupsFlag=ref(true)
	//搜索字段
	let keyword=ref('')
	let groupList = ref<any>([])
	let allList = ref<any>([])
	// 获取群组列表
	let onGroupListUpdated = function (list : any) {
		allList.value=list
		groupList.value = list
		console.log(groupList.value, "当前的群组")
	}
	//创建群聊
	let onCreateGroup=()=>{
		TUIGlobal?.navigateTo({
		  url: "/pages/TUIKit/components/TUIGroup/create-group/index",
		});
	}
	//搜索群
	const searchChange=()=>{
		if(keyword.value===''){
			groupList.value = allList.value
		}else{
			let arr=[]
			allList.value.map(item=>{
				if(item.name.indexOf(keyword.value)!=-1)
				arr.push(item)
			})
			groupList.value=arr
		}
	}
	//点击群
	const enterConversation = (item) => {
		 TUIGlobal?.navigateTo({
		   url: "/pages/TUIKit/components/TUIChat/index?id="+('GROUP'+item.groupID),
		 });
	}
	const getGroupList = () => {
		//获取群列表
		TUIStore.watch(StoreName.GRP, {
			groupList: onGroupListUpdated,
		});
	}
	onShow(() => {
		
		TUIStore.watch(StoreName.CUSTOM, {
			IMuserInfo: (data : any) => {
				if (data) {
					// groupsFlag.value=data.groupsFlag
					getGroupList()
					checkUserInfo()
				}
		
			}
		})
		
	})
	
</script>
<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.list {
		padding: 0 30rpx;
		display: flex;
		align-items: center;

		.content {
			padding: 14rpx 0;
			margin-left: 26rpx;
			font-size: 32rpx;
			border-bottom: 1px solid #ececee;
			width: 80%;
			line-height: 50px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.TUI-group {
		width: 100%;
		height: 100%;
	}
	.search-box{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background: #FFF;
	}
	.empty{
		margin-top: 60rpx;
	}
	::v-deep .uicon-plus{
		font-size: 32rpx !important;
		margin-right:8rpx;
	}
</style>